<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边缘计算网关控制中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
        }
        
        .sidebar h2 {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #34495e;
        }
        
        .sidebar ul {
            list-style: none;
        }
        
        .sidebar li {
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .sidebar li:hover, .sidebar li.active {
            background-color: #34495e;
        }
        
        .main-content {
            flex: 1;
            padding: 20px;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .device-panel {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .device-panel h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .sensor-grid, .control-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .sensor-item, .control-item {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid #3498db;
        }
        
        .control-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #2196F3;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .value-display {
            font-size: 24px;
            font-weight: bold;
            color: #3498db;
        }
        
        .footer {
            text-align: center;
            padding: 10px;
            background-color: #2c3e50;
            color: white;
            position: fixed;
            bottom: 0;
            width: calc(100% - 200px);
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <h2>控制面板</h2>
        <ul>
            <li class="active" onclick="switchTab('mobus')">Mobus控制</li>
            <li onclick="switchTab('microcontroller')">单片机控制</li>
        </ul>
    </div>
    
    <div class="main-content">
        <!-- Mobus控制面板 -->
        <div id="mobus" class="tab-content active">
            <div class="device-panel">
                <h3>人流量监控</h3>
                <div class="sensor-grid">
                    <div class="sensor-item">
                        <p>进入人数</p>
                        <div class="value-display" id="people-in">0</div>
                    </div>
                </div>
            </div>
            
            <div class="device-panel">
                <h3>门禁系统</h3>
                <div class="control-grid">
                    <div class="control-item">
                        <p>门禁状态</p>
                        <label class="switch">
                            <input type="checkbox" id="door-access" onchange="toggleMobusControl('door-access')">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="control-item">
                        <p>窗户状态</p>
                        <label class="switch">
                            <input type="checkbox" id="window-state" onchange="toggleMobusControl('window-state')">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="device-panel">
                <h3>空调系统</h3>
                <div class="control-grid">
                    <div class="control-item">
                        <p>空调开关</p>
                        <label class="switch">
                            <input type="checkbox" id="ac-power" onchange="toggleMobusControl('ac-power')">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="control-item">
                        <p>温度设置</p>
                        <input type="range" id="ac-temp" min="16" max="30" value="24" onchange="updateMobusTemp()">
                        <span id="temp-value">24°C</span>
                    </div>
                </div>
            </div>
            
            <div class="device-panel">
                <h3>排风系统</h3>
                <div class="control-grid">
                    <div class="control-item">
                        <p>排风开关</p>
                        <label class="switch">
                            <input type="checkbox" id="ventilation" onchange="toggleMobusControl('ventilation')">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 单片机控制面板 -->
        <div id="microcontroller" class="tab-content">
            <div class="device-panel">
                <h3>传感器数据</h3>
                <div class="sensor-grid">
                    <div class="sensor-item">
                        <p>温度</p>
                        <div class="value-display" id="temperature">0°C</div>
                    </div>
                    <div class="sensor-item">
                        <p>湿度</p>
                        <div class="value-display" id="humidity">0%</div>
                    </div>
                    <div class="sensor-item">
                        <p>红外传感器</p>
                        <div class="value-display" id="infrared">无</div>
                    </div>
                    <div class="sensor-item">
                        <p>火焰传感器</p>
                        <div class="value-display" id="flame">无</div>
                    </div>
                </div>
            </div>
            
            <div class="device-panel">
                <h3>控制设备</h3>
                <div class="control-grid">
                    <div class="control-item">
                        <p>风扇</p>
                        <label class="switch">
                            <input type="checkbox" id="fan" onchange="toggleMicroControl('fan')">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="control-item">
                        <p>门窗</p>
                        <label class="switch">
                            <input type="checkbox" id="door-window" onchange="toggleMicroControl('door-window')">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="control-item">
                        <p>灯光</p>
                        <label class="switch">
                            <input type="checkbox" id="light" onchange="toggleMicroControl('light')">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="control-item">
                        <p>蜂鸣器</p>
                        <label class="switch">
                            <input type="checkbox" id="buzzer" onchange="toggleMicroControl('buzzer')">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="footer">
        边缘计算网关控制中心 &copy; 2023
    </div>
    
    <script>
        // 切换标签页
        function switchTab(tabId) {
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.sidebar li').forEach(li => {
                li.classList.remove('active');
            });
            
            document.getElementById(tabId).classList.add('active');
            event.currentTarget.classList.add('active');
        }
        
        // Mobus控制切换
        function toggleMobusControl(controlId) {
            const isChecked = document.getElementById(controlId).checked;
            fetch(`http://localhost:8081/mobus/${controlId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({state: isChecked})
            });
        }
        
        // 更新Mobus温度
        function updateMobusTemp() {
            const temp = document.getElementById('ac-temp').value;
            document.getElementById('temp-value').textContent = `${temp}°C`;
            fetch(`http://localhost:8081/mobus/ac-temp`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({temperature: temp})
            });
        }
        
        // 单片机控制切换
        function toggleMicroControl(controlId) {
            const isChecked = document.getElementById(controlId).checked;
            fetch(`http://localhost:8081/micro/${controlId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({state: isChecked})
            });
        }
        
        // 模拟从后端获取数据
        function fetchData() {
            // 获取Mobus数据
            fetch('http://localhost:8081/mobus/data')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('people-in').textContent = data.peopleIn || 0;
                    document.getElementById('door-access').checked = data.doorAccess || false;
                    document.getElementById('window-state').checked = data.windowState || false;
                    document.getElementById('ac-power').checked = data.acPower || false;
                    document.getElementById('ac-temp').value = data.acTemp || 24;
                    document.getElementById('temp-value').textContent = `${data.acTemp || 24}°C`;
                    document.getElementById('ventilation').checked = data.ventilation || false;
                });
            
            // 获取单片机数据
            fetch('http://localhost:8081/micro/data')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('temperature').textContent = `${data.temperature || 0}°C`;
                    document.getElementById('humidity').textContent = `${data.humidity || 0}%`;
                    document.getElementById('infrared').textContent = data.infrared ? '有' : '无';
                    document.getElementById('flame').textContent = data.flame ? '有' : '无';
                    document.getElementById('fan').checked = data.fan || false;
                    document.getElementById('door-window').checked = data.doorWindow || false;
                    document.getElementById('light').checked = data.light || false;
                    document.getElementById('buzzer').checked = data.buzzer || false;
                });
        }
        
        // 每2秒更新一次数据
        setInterval(fetchData, 2000);
        // 初始加载数据
        fetchData();
    </script>
</body>
</html>